<template>
  <div class="button-container">
    <div>专题</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'case' }" @click="activateNavItem('case')" @click.stop="Case()"> 案例集锦</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'skills' }" @click="activateNavItem('skills')" @click.stop="Skill()"> 技能示范</div>
  </div>
  <div v-if="resourceIds.length > 0">
    <Card v-for="resourceId in resourceIds" :key="resourceId" :resourceId="resourceId"/>
  </div>
  <div v-if="skills">
    <div class="button-container">
      <div>分类</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem2 === 'agriculture' }" @click="activateNavItem2('agriculture')" @click.stop="Agriculture()"> 农业类</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem2 === 'industry' }" @click="activateNavItem2('industry')" @click.stop="Industry()"> 工业类</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem2 === 'service' }" @click="activateNavItem2('service')" @click.stop="Service()">服务类</div>
    </div>
  </div>
  <div v-if="agriculture" class="container">
    <a href="https://zyk.icve.com.cn/materialDetailed?id=z14faacnt4ldyspxhcyk5g" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E8%AE%A4%E8%AF%86%E6%9D%82%E4%BA%A4%E6%B0%B4%E7%A8%BB_1653363393535.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">认识杂交水稻</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
    <a href="https://www.icve.com.cn/portal/manage-sourcematerialofindex-editmaterial?docid=gym1alatrrja5t80cxbrta" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E6%B0%B4%E7%A8%BB%E6%8F%92%E7%A7%A7_1653363560796.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">水稻插秧</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
    <a href="https://www.icve.com.cn/portal_new/sourcematerial/edit_seematerial.html?docid=er3naiouhivdndnitx6gpg" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E9%A3%9F%E5%93%81%E4%B8%AD%E5%85%BD%E8%8D%AF%E6%AE%8B%E7%95%99%E7%9A%84%E6%9D%A5%E6%BA%90_1653363786083.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">食品中兽药残留的来源</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
  </div>
  <div v-if="industry" class="container">
    <a href="https://www.icve.com.cn/portal_new/sourcematerial/edit_seematerial.html?docid=wlofacwopr5jxwm9sdc-0a" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E6%A1%83%E8%8A%B1%E5%9D%9E%E9%87%8C%E7%9A%84%E7%97%B4%E6%83%85%E5%AE%88%E6%9C%9B_1653362816780.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">桃花坞里的痴情守望</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
    <a href="https://www.icve.com.cn/portal/manage-sourcematerialofindex-editmaterial?docid=-ep1aneow5tknojwcdd7lq" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E6%99%AF%E5%BE%B7%E9%95%87%E6%89%8B%E5%B7%A5%E5%88%B6%E7%93%B7%E6%8A%80%E8%89%BA%E6%A6%82%E8%BF%B0_1653362888021.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">景德镇手工制瓷技艺概述</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
    <a href="https://www.icve.com.cn/portal/manage-sourcematerialofindex-editmaterial?docid=fpoyackonjfohrirly477g" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%8F%A4%E5%9F%8E%E8%AF%9D%E6%BC%86_1653363169186.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">古城话漆</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
  </div>
  <div v-if="service" class="container">
    <a href="https://www.icve.com.cn/portal_new/sourcematerial/edit_seematerial.html?docid=xauiaxgtfotklg1xrjaz4a" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E4%B8%AD%E9%A4%90%E4%B8%BB%E9%A2%98%E5%AE%B4%E4%BC%9A%E8%AE%BE%E8%AE%A1%E6%9D%A5%E6%BA%90%E5%8F%8A%E8%A6%81%E6%B1%82_1653363335091.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">中餐主题宴会设计来源及要求</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
    <a href="https://www.icve.com.cn/portal_new/sourcematerial/edit_seematerial.html?docid=yeviaqmunqbbqdh2he7f4q" class="card">
      <img src="https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E8%A1%A3%E7%89%A9%E6%B4%97%E6%B6%A4_1653363366131.png?x-eos-process=image/format,webp/resize,m_lfit,w_240"  alt="图片加载失败" width="20%" height="auto" />
      <div class="card-content">
        <h3 class="card-title">衣物洗涤</h3>
        <h3 class="kong">  </h3>
        <div class="card-info">
          <span class="card-source">作者：智慧职教</span>
        </div>
      </div>
    </a>
  </div>

</template>

<script lang="ts">
import Card from "@/components/CardOne.vue";
import {resourceApi} from "@/api/resourceApi.js";

export default {
  data() {
    return {
      activeNavItem1: 'case',
      activeNavItem2: '',
      case: true,
      skills: false,
      resourceIds:[],
      coverName:[],
      tags:'劳动教育/劳动智慧/案例集锦',
      agriculture: false,
      industry: false,
      service: false
    };
  },
  components: {
    Card
  },
  methods: {
    load(){
      resourceApi.searchResources(this.tags, '')
          .then(async result => {
            const res = result.data;
            this.resourceIds = res.map(item => item.resourceId);
            this.coverName = res.map(item => item.coverName);
          })
    },
    activateNavItem(id) {
      this.activeNavItem1 = id;
    },
    activateNavItem2(id) {
      this.activeNavItem2 = id;
    },
    Case() {
      this.case = true;
      this.skills = false;
      this.activeNavItem1 = 'case';
      this.agriculture = false;
      this.industry = false;
      this.service = false;
      this.tags = '劳动教育/劳动智慧/案例集锦';
      this.load();
    },
    Skill() {
      this.skills = true;
      this.case = false;
      this.activeNavItem1 ='skills';
      this.activeNavItem2 ='agriculture';
      this.tags = '错误';
      this.agriculture = true;
      this.load();
    },
    Agriculture() {
      this.agriculture = true;
      this.industry = false;
      this.service = false;
      this.activeNavItem2 = 'agriculture';
    },
    Industry() {
      this.industry = true;
      this.agriculture = false;
      this.service = false;
      this.activeNavItem2 = 'industry';
    },
    Service() {
      this.service = true;
      this.industry = false;
      this.agriculture = false;
      this.activeNavItem2 ='service';
    }
  },
  created() {
    this.load();
  }
};
</script>

<style scoped>
.button-container {
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 20px;
  display: flex; /* 使用flex布局 */
  text-align: center; /* 文本居中 */
  background-color: white; /* 默认背景颜色 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.nav-item:hover {
  color: #007bff; /* 鼠标悬停时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标悬停时的背景颜色 */
}

.nav-item:active {
  color: #007bff; /* 鼠标点击时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标点击后保持白色背景 */
}
.active-nav-item {
  background-color: #e6e6fa !important; /* 确保背景色为白色 */
  color: #007bff !important; /* 确保字体颜色 */
}
.card {
  display: flex;
  border: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.card-img {
  width: 150px;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  color: black;
  flex: 1;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.card-info {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}
kong{
  height: 80%;
}
</style>